<template>
    <div style="height: 100%;">
        <a-card title="业绩排名" style="height: 100%;">
          <div>
            <div style="width: 33%;display: flex; float: left">
              <div style="position: relative;top: 80px;left:0;right:0;margin:0 auto;">
                <div class="icon-silver">
                  <svg t="1666862495690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3207" width="200" height="200"><path d="M816.49 909H211.21c-1.1 0-2-0.9-2-2v-68.18c0-1.1 0.9-2 2-2h605.28c1.1 0 2 0.9 2 2V907c0 1.1-0.9 2-2 2z" fill="#dbdbdb" p-id="3208"></path><path d="M910.24 316.23c-27.11 0-49.1 22.52-49.1 50.31 0 7.28 1.58 14.16 4.3 20.4l-176.13 80.21-147.2-258.57c14.56-8.73 24.46-24.74 24.46-43.28 0-27.79-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 17.99 9.29 33.66 23.15 42.55l-158.16 259.3-176.13-80.21c2.71-6.25 4.3-13.12 4.3-20.4 0-27.78-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 27.78 21.98 50.31 49.1 50.31 3.99 0 7.82-0.62 11.53-1.54l86.65 366.28h601.43l86.65-366.28c3.71 0.92 7.54 1.54 11.53 1.54 27.12 0 49.1-22.52 49.1-50.31 0.01-27.78-21.97-50.31-49.08-50.31z" fill="#dbdbdb" p-id="3209"></path></svg>
                </div>
                <div style="text-align: center">
                  <a-avatar icon="user" :src="silver.avatar"/>
                </div>
                <div style="text-align:center;color: #9b9a9aee;">{{ silver.realname != null ? silver.realname : '无' }}</div>
                <div style="text-align:center;color: #9b9a9aee;">¥ {{ silver.money != null ? silver.money : 0 }}</div>
              </div>
            </div>
            <div style="width: 33%;display: flex; float: left">
              <div style="position: relative;top: 10px;left:0;right:0;margin:0 auto;">
                <div class="icon-king">
                  <svg t="1666861437235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2592" width="200" height="200"><path d="M816.49 909H211.21c-1.1 0-2-0.9-2-2v-68.18c0-1.1 0.9-2 2-2h605.28c1.1 0 2 0.9 2 2V907c0 1.1-0.9 2-2 2z" fill="#FFAA22" p-id="2593"></path><path d="M910.24 316.23c-27.11 0-49.1 22.52-49.1 50.31 0 7.28 1.58 14.16 4.3 20.4l-176.13 80.21-147.2-258.57c14.56-8.73 24.46-24.74 24.46-43.28 0-27.79-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 17.99 9.29 33.66 23.15 42.55l-158.16 259.3-176.13-80.21c2.71-6.25 4.3-13.12 4.3-20.4 0-27.78-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 27.78 21.98 50.31 49.1 50.31 3.99 0 7.82-0.62 11.53-1.54l86.65 366.28h601.43l86.65-366.28c3.71 0.92 7.54 1.54 11.53 1.54 27.12 0 49.1-22.52 49.1-50.31 0.01-27.78-21.97-50.31-49.08-50.31z" fill="#FFD68D" p-id="2594"></path></svg>
                </div>
                <div style="text-align: center">
                  <a-avatar :size="50" icon="user" :src="king.avatar"/>
                </div>
                <div style="text-align:center;color: #9b9a9aee;">{{ king.realname != null ? king.realname : '无' }}</div>
                <div style="text-align:center;color: #9b9a9aee;">¥ {{ king.money != null ? king.money : 0 }}</div>
              </div>
            </div>
            <div style="width: 33%;display: flex; float: left">
              <div style="position: relative;top: 80px;left:0;right:0;margin:0 auto;">
                <div class="icon-copper">
                  <svg t="1666862495690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3207" width="200" height="200"><path d="M816.49 909H211.21c-1.1 0-2-0.9-2-2v-68.18c0-1.1 0.9-2 2-2h605.28c1.1 0 2 0.9 2 2V907c0 1.1-0.9 2-2 2z" fill="#eeebbd" p-id="3208"></path><path d="M910.24 316.23c-27.11 0-49.1 22.52-49.1 50.31 0 7.28 1.58 14.16 4.3 20.4l-176.13 80.21-147.2-258.57c14.56-8.73 24.46-24.74 24.46-43.28 0-27.79-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 17.99 9.29 33.66 23.15 42.55l-158.16 259.3-176.13-80.21c2.71-6.25 4.3-13.12 4.3-20.4 0-27.78-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 27.78 21.98 50.31 49.1 50.31 3.99 0 7.82-0.62 11.53-1.54l86.65 366.28h601.43l86.65-366.28c3.71 0.92 7.54 1.54 11.53 1.54 27.12 0 49.1-22.52 49.1-50.31 0.01-27.78-21.97-50.31-49.08-50.31z" fill="#eeebbd" p-id="3209"></path></svg>
                </div>
                <div style="text-align: center">
                  <a-avatar icon="user" :src="copper.avatar"/>
                </div>
                <div style="text-align:center;color: #9b9a9aee;">{{ copper.realname != null ? copper.realname : '无' }}</div>
                <div style="text-align:center;color: #9b9a9aee;">¥ {{ copper.money != null ? copper.money : 0 }}</div>
              </div>
            </div>
            </div>
        </a-card>
    </div>
</template>
<script>
  import { postAction } from '@/api/manage'
  export default {
    name: "PerformanceRanking",
    components: {

    },
    data() {
      return {
        king: {},
        silver: {},
        copper: {},
        url: {
          getData: "/ghDepositPay/getPerformanceRanking",
        },
      }
    },
    created() {

    },
    methods: {
      initData(params) {
        postAction(this.url.getData, params).then(res => {
          if (res.success) {
            if(res.result != null) {
              if(res.result.king != null) {
                this.king = res.result.king;
              } else {
                this.king = '';
              }

              if(res.result.silver != null) {
                this.silver = res.result.silver;
              } else {
                this.silver = '';
              }

              if(res.result.copper != null) {
                this.copper = res.result.copper;
              } else {
                this.copper = '';
              }
            }
          }
        });
      }
    }
  }
</script>
<style>
.icon-king {
  width: 30px;
  position: relative;
  top: 7px;
  left:48%;
  margin-top: -15px;
  transform:rotate(25deg)
}
.icon-silver {
  width: 30px;
  position: relative;
  top: 9px;
  left:50%;
  margin-top: -15px;
  transform:rotate(30deg)
}
.icon-copper{
  width: 30px;
  position: relative;
  top: 9px;
  left:50%;
  margin-top: -15px;
  transform:rotate(30deg)
}
.icon {
  width: 25px;
  height: 25px;
}
</style>